<template>
  <div class="wrap" id="LostPassword">
    <loginHeader></loginHeader>
    <!--logo部分-->
    <div style="background:#ffffff;">
      <div class="logo">
        <img class="logo" src="./../../assets/img/login/LoginLOGO.png" alt="">
        <p class="headerTxt">用户找回密码</p>
      </div>
    </div>
    <div class="content">
      <!-- 第一步 -->
      <div class="block" v-if="index==0">
        <div class="row_frist"><i class="el-icon-warning" style="color:#00ADFF"></i>为确保是您本人操作，请完成以下验证！</div>
        <div class="row_second">手机号 <input v-model="phoneNum" :class="isActive?'redClass':''" @focus="phone" @blur="phoneNull"
            type="text"> <span v-if="inp"><i class="el-icon-error" style="color: red;"></i>请输入手机号</span></div>
        <div class="row_third">校验码 <input v-model="phoneCode" :class="first?'redClass':''" @focus="firstFun" @blur="firstFun"
            type="text"> <span @click="getYzm">{{yzm}}</span></div>
        <div class="row_fourth" v-if="index==0" @click="next">确定</div>
      </div>
      <!-- 确定下一步 -->
      <div class="block_second" v-if="index==1">
        <div class="sec_first">账户名 <span style="color:#FA3D0D ;padding-left: 27px">{{phoneNum}}</span></div>
        <div class="sec_second">新的登录密码 <input :class="second?'redClass':''" @focus="secondFun" @blur="secondFun"
            v-model="firPsd" type="password"> </div>
        <div class="sec_thrid"><i class="el-icon-warning" style="color:#00ADFF"></i>必须是8-20位英文字母、数字或符号、不能是纯数字或纯字母</div>
        <div class="sec_fourth">确定新的登录密码 <input v-model="secPsd" :class="third?'redClass':''" @focus="thirdFun" @blur="thirdFun"
            type="password"> </div>
        <div class="sec_confirm" v-if="index==1" @click="next">确定</div>
      </div>
      <!-- 成功 -->
      <div class="last" v-if="index>1">
        <div class="thi_first"><i class="el-icon-success" style="color: #6BC827; font-size: 28px;"></i>密码修改成功</div>
        <div class="thi_second">下次登录时候使用新密码进行登录</div>
        <div class="thi_third"><span @click="retu">返回我的</span></div>
      </div>
    </div>
    <loginFooter></loginFooter>
  </div>
</template>

<script>
  import loginHeader from "./LoginHeader";
  import loginFooter from "./LoginFooter";
  export default {
    name: "lostPassword",
    components: {
      loginHeader,
      loginFooter
    },
    data() {
      return {
        index: "0",
        yzm: '免费获取验证码',
        phoneNum: '',
        /* 手机号 */
        phoneCode: '',
        /* 验证码 */
        isActive: false,
        /* 手机号获取失去焦点 */
        inp: false,
        firPsd: '',
        /* 一次密码 */
        secPsd: '',
        /* 二次密码 */
        first: false,
        second: false,
        third: false,
      }
    },
    methods: {
      // 手机号获取焦点
      phone() {
        this.isActive = true;
      },
      // 手机号失去焦点事件
      phoneNull() {
        if (this.phoneNum == "" || this.phoneNum == null) {
          this.inp = true;
        } else {
          this.inp = false;
        }
        this.isActive = false;
      },
      //发送验证码
      getYzm() {
        if (this.phoneNum.length != 11) {
          alert("手机号输入错误");
          return;
        }
        alert("验证码");
      },
      // 确定点击事件
      next() {
        //第一次验证
        if (this.phoneNum == "" || this.phoneCode == "") {
          alert("请先输入手机号和验证码");
        } else if (this.index < 1) {
          this.index++;
        }
        //第二步验证
        else if (8>this.firPsd.length|| this.firPsd.length>20|| 8> this.secPsd.length||this.secPsd.length>20) {
          alert("密码在8-20位");
        } else if (this.firPsd != this.secPsd) {
          alert("两次输入密码不一致");
        } else {
          this.index = 2;
        }
      },
      retu() {
        alert("返回地址");
      },
      // 焦点事件
      firstFun() {
        this.first = !this.first;
      },
      secondFun() {
        this.second = !this.second;
      },
      thirdFun() {
        this.third = !this.third;
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
  /*出现垂直滚动条*/
  #LostPassword {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /*logo部分*/
  .logo {
    width: 1200px;
    height: 90px;
    margin: 0 auto;
    background: #ffffff;
    overflow: hidden;
  }

  .logo .logo {
    width: 61px;
    height: 56px;
    margin-top: 19px;
    float: left;
  }

  .logo .headerTxt {
    float: left;
    font-size: 26px;
    font-family: 微软雅黑;
    font-weight: 500;
    line-height: 120px;
    margin-left: 10px;
    color: rgba(51, 51, 51, 1);
  }

  /*中心内容*/
  .content {
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    overflow-x: visible;
    overflow-y: visible;
  }

  .block {
    margin: 0 auto;
    width: 600px;
    font-size: 16px;
    font-family: "PingFang-SC-Medium";
    font-weight: 500;
    color: #000000;
  }

  input {
    margin-left: 25px;
    line-height: 38px;
    width: 260px;
    border: 1px #D9D9D9 solid;
    padding-left: 10px;
  }

  .block .row_frist {
    margin-top: 52px;
    line-height: 38px;
    font-size: 12px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .row_second {
    margin-top: 50px;
  }

  .content .redClass {
    border: 1px solid rgba(231, 38, 27, 1);
    box-shadow: 0px 0px 1px 0px rgba(239, 48, 21, 1);
  }

  .row_third {
    margin-top: 22px;
    line-height: 38px;
  }

  .row_third input {
    margin-left: 25px;
    width: 110px;
    border: 1px #D9D9D9 solid;
  }

  .row_third span {
    width: 150px;
    height: 38px;
    cursor: pointer;
    padding: 10px 19px;
    margin-left: 10px;
    font-size: 16px;
    font-family: "PingFang-SC-Medium";
    font-weight: 500;
    color: rgba(250, 61, 13, 1);
    background: rgba(250, 250, 250, 1);
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 5px;
  }

  .row_fourth,
  .sec_confirm {
    margin: 50px 0 0 80px;
    width: 120px;
    height: 40px;
    background: linear-gradient(4deg, rgba(231, 38, 27, 1), rgba(253, 64, 11, 1));
    box-shadow: 0px 4px 7px 0px rgba(233, 40, 26, 0.3);
    border-radius: 5px;
    font-size: 20px;
    font-family: "PingFang-SC-Bold";
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    line-height: 40px;
    text-align: center;
    cursor: pointer;
  }

  .block_second {
    font-size: 16px;
    font-family: "PingFang-SC-Medium";
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }

  .block_second div {
    margin-right: 27px;
    line-height: 38px;
  }

  .sec_first {
    margin-left: 422px;
    margin-top: 50px;
  }

  .sec_second {
    margin-top: 34px;
    margin-left: 374px;
  }

  .sec_thrid {
    font-size: 12px;
    margin-left: 493px;
  }

  .sec_fourth {
    margin-left: 343px;
  }

  .sec_confirm {
    margin-left: 494px;
  }

  .last {
    margin-top: 50px;
    width: 1200px;
    height: 190px;
    background: rgba(243, 253, 246, 1);
    border: 1px solid rgba(222, 243, 230, 1);
  }

  .thi_first {
    margin: 40px 0 0 303px;
    font-size: 22px;
    font-family: "PingFang-SC-Bold";
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 30px;
  }

  .thi_second {
    margin-left: 331px;
    margin-top: 10px;
    font-size: 14px;
    font-family: "PingFang-SC-Regular";
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 22px;
  }

  .thi_third {
    margin-top: 40px;
    width: 869px;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(222, 243, 230, 1);
    line-height: 48px;
    font-size: 16px;
    font-family: "PingFang-SC-Medium";
    padding-left: 331px;
    font-weight: 500;
  }

  .thi_third span {
    color: rgba(231, 38, 27, 1);
    cursor: pointer;
  }

  /*动态绑定Class,控制隐藏显示*/
  #Block {
    display: block;
  }

  #inlineBlock {
    position: absolute;
    top: 14px;
  }

  #None {
    display: none;
  }
</style>
